<template>
  <view class="detail-container">
    <navbar title="考点练习"></navbar>
    <TiyanDialog :bottom="true"></TiyanDialog>
    <view class="top-container" v-if="inited">
      <view class="item color-first" @click="toEasyWrong()">
        <text class="title">易错题</text>
        <text class="sub-title">共{{ topData.easyWrong.count }}题</text>
      </view>
      <view class="flex v">
        <view class="item color-second" @click="toIcon()">
          <text class="title">图标大全</text>
          <text class="sub-title">共{{ topData.signIcon.count }}题</text>
        </view>
        <view class="item color-local" @click="toLocation()">
          <text class="title">地方题</text>
          <text class="sub-title">共8个地区</text>
        </view>
      </view>
    </view>
    <view class="tip_label">
      考点进度
    </view>
    <view class="list-container">
      <view class="item" v-for="(item, i) in list" :key="item.id" @click="toDetail(item)">
        <view class="flex v f1 hc">
          <view :class="['icon', 'tag_'+item.id]" :style="{'background-image': styleBgImageUrl('/static/tag/icon/tag'+item.id+'.png')+','+styleBgImageUrl('/static/tag/icon/tag41.png')}"></view>
          <text class="label">{{ item.title }}</text>
          <view class="flex h vc">
            <view style="position: relative;width: 200upx;margin-top: 5upx;margin-right: 20rpx">
              <view class="precount-bg"></view>
              <view class="precount" :style="{width : item.precent+ '%'}"></view>
            </view>
            <text style="font-size: 22upx;color: rgba(151, 156, 173, 1)">{{ item.precent + '%' }}</text>
          </view>
          <view class="btn">去学习</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navbar from '@/components/navbar'
import {mapGetters, mapActions} from 'vuex'
import {styleBgImageUrl} from "@/libs/utils";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {
    TiyanDialog,
    navbar
  },
  data() {
    return {
      inited: false,
      list: [],
      topData: {
        easyWrong: {
          count: '-'
        },
        signIcon: {
          count: '-'
        }
      },
    }
  },
  computed: {
    ...mapGetters([])
  },
  onLoad({kemu}) {
    this.kemu = kemu
    this.tagList(kemu).then(res => {
      this.list = res.list
      this.topData = res.topData
      this.inited = true
    })
  },
  onReady() {
  },
  methods: {
    styleBgImageUrl,
    ...mapActions('question', ['tagList']),
    toDetail(tag) {
      const doFn = () => {
        uni.navigateTo({
          url: '/pages/lianxi_start/lianxi_start?kemu=' + this.kemu + '&type=' + tag.type + '&title=' + tag.title,
        });
      }

      doFn()
    },
    toLocation() {
      // uni.navigateTo({
      //   url: '/pages/detail/detail?type=' + this.topData.location.type + '&title='+this.topData.location.title,
      // })
      uni.navigateTo({
        url: '/pages/location_question/location_question?kemu=' + this.kemu
      })
    },
    toEasyWrong() {
      uni.navigateTo({
        url: '/pages/detail/detail?type=' + this.topData.easyWrong.type + '&title=易错题&kemu=' + this.kemu,
      })
    },
    toIcon() {
      uni.navigateTo({
        url: '/pages/icon_category/icon_category?kemu=' + this.kemu
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f3fb;
}

::v-deep .top-bar.white {
  background-color: transparent;
}

.detail-container {
  display: flex;
  flex-direction: column;
  position: relative;

  .tip_label {
    font-size: 32rpx;
    color: rgba(52, 60, 90, 1);
    margin: 32rpx;
    font-weight: bold;
  }

  .top-container {
    margin-top: 20upx;
    display: flex;
    justify-content: space-between;
    //margin-left: 17upx;
    //margin-right: 17upx;

    .item {
      display: flex;
      height: 122upx;
      flex-direction: column;
      justify-content: center;
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 20upx;
      overflow: hidden;
    }

    .color-local {
      background-image: url("@/static/tag/local.png");
      width: 332rpx;
      height: 162rpx;

      .title {
      }
    }

    .color-first {
      background-image: url("@/static/tag/yicuo.png");
      width: 332rpx;
      height: 344rpx;
      margin-left: 32upx;
      background-size: cover;
      justify-content: flex-start;

      .title {
        margin-top: 45rpx;
      }
    }

    .color-second {
      background-image: url("@/static/tag/tubiao.png");
      margin-bottom: 20rpx;
      width: 332rpx;
      height: 162rpx;
      margin-right: 32rpx;
    }

    .title {
      font-size: 34upx;
      color: #FFFFFF;
      font-weight: bold;
      margin-left: 36upx;
    }

    .sub-title {
      font-size: 28upx;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 8upx;
      margin-left: 36upx;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .icon-watermark {
      width: 124upx;
      height: 60upx;
      position: absolute;
      bottom: 0upx;
      right: 0upx;
    }
  }

  .list-container {
    // margin-top: calc(var(--status-bar-height) + 76upx + 40upx);
    display: flex;
    flex-wrap: wrap;
    padding-left: 10rpx;

    .item {
      display: flex;
      width: 335upx;
      align-items: center;
      background-color: #fff;
      margin-bottom: 24rpx;
      margin-left: 22rpx;
      border-radius: 32rpx;
      padding-top: 110rpx;
      padding-bottom: 24rpx;
      position: relative;
      margin-top: 35rpx;
      .icon {
        position: absolute;
        top: -35rpx;
        width: 112rpx;
        height: 112rpx;
        background-size: cover;
        background-position: center;
        border: 20rpx solid #fff;
        border-radius: 50rpx;
      }
      .btn {
        border-radius: 44rpx;
        background: #EDF0FF;
        padding: 15rpx 40rpx;
        font-size: 24rpx;
        color: rgba(63, 99, 248, 1);
        margin-top: 20rpx;
      }

      .no {
        width: 40upx;
        height: 40upx;
        border: 1px solid #3073F6;
        border-radius: 24upx;
        color: #3073F6;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22upx;
        margin-right: 20upx;
      }

      .label {
        font-size: 30upx;
        margin-bottom: 20upx;
        color: rgba(52, 60, 90, 1);
        font-weight: bold;
      }

      .count {
        color: #929292;
        font-size: 22upx;
      }

      .precount-bg {
        background-color: rgba(244, 243, 251, 1);
        height: 16upx;
        border-radius: 17upx;
        width: 100%;
      }

      .precount {
        background-color: rgba(161, 179, 251, 1);
        height: 16upx;
        border-radius: 17upx;
        position: absolute;
        top: 0;
        z-index: 1;
        bottom: 0;
      }
    }
  }
}
</style>
